<template>
  <div class="scroll-content">
    <div class="title-list">
      <button
        v-for="(title, index) in titles"
        :key="index"
        :class="{ active: currentIndex === index }"
        @click="switchContent(index)"
      >
        {{ title }}
      </button>
    </div>
    <div class="content-list" ref="contentContainer">
      <div
        v-for="(content, index) in contents"
        :key="index"
        class="content"
        :class="{ active: currentIndex === index }"
      >
        {{ content }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 数据定义
const titles = ['标题 1', '标题 2', '标题 3']
const contents = [
  '这是标题 1 的内容。这里是一些示例文本，用来模拟真实的内容。这是标题 1 的内容。这里是一些示例文本，用来模拟真实的内容。这是标题 1 的内容。这里是一些示例文本，用来模拟真实的内容。这是标题 1 的内容。这里是一些示例文本，用来模拟真实的内容。这是标题 1 的内容。这里是一些示例文本，用来模拟真实的内容。这是标题 1 的内容。这里是一些示例文本，用来模拟真实的内容。这是标题 1 的内容。这里是一些示例文本，用来模拟真实的内容。这是标题 1 的内容。这里是一些示例文本，用来模拟真实的内容。这是标题 1 的内容。这里是一些示例文本，用来模拟真实的内容。这是标题 1 的内容。这里是一些示例文本，用来模拟真实的内容。这是标题 1 的内容。这里是一些示例文本，用来模拟真实的内容。',
  '这是标题 2 的内容。这里是一些示例文本，用来模拟真实的内容。',
  '这是标题 3 的内容。这里是一些示例文本，用来模拟真实的内容。'
]

// 当前显示的内容索引
const currentIndex = ref(0)

// 定义滚动容器的引用
const contentContainer = ref(null)

// 方法：自动滚动到底部
const scrollToBottom = () => {
  if (contentContainer.value) {
    contentContainer.value.scrollTop = contentContainer.value.scrollHeight
  }
}

// 方法：切换到下一个内容
const switchContent = (index) => {
  currentIndex.value = index
  scrollToBottom()
}

// 监听滚动事件
const handleScroll = (event) => {
  if (event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight) {
    const newIndex = currentIndex.value + 1
    if (newIndex < titles.length) {
      switchContent(newIndex)
    }
  }
}

// 在组件挂载完成后监听滚动事件
onMounted(() => {
  contentContainer.value.addEventListener('scroll', handleScroll)
  // 清除事件监听器
  onUnmounted(() => {
    contentContainer.value.removeEventListener('scroll', handleScroll)
  })
})

// 在组件挂载完成后自动滚动到底部
onMounted(() => {
  scrollToBottom()
})
</script>

<style scoped>
.scroll-content {
  display: flex;
  /* justify-content: space-between; */
}

.title-list {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
}

.content-list {
  /* flex-grow: 1; */
  width: 300px;
  padding: 10px;
  overflow-y: auto;
  border: 1px solid #ccc;
}

button {
  display: block;
  margin-bottom: 5px;
  cursor: pointer;
  background-color: #f1f1f1;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
}

.active {
  background-color: #ddd;
}

.content {
  display: none;
}

.content.active {
  display: block;
}
</style>
